<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>每日跟踪报表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <div style="overflow:hidden">
        <a-form layout="inline">
          <a-form-item label="操作姓名">
            <a-input v-model="form.handlerLike" />
          </a-form-item>
          <a-form-item label="所属部门">
            <a-tree-select
              class="selectInputWidth"
              v-model="form.deptId"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择部门"
              :load-data="onLoadData"
              :tree-data="deptTreeData"
              :tree-default-expanded-keys="defaultExpandedKeys"
            ></a-tree-select>
          </a-form-item>
          <a-form-item label="日期">
            <a-range-picker
              :value="createValue"
              @change="onChange"
              format="YYYY-MM-DD"
              style="width:300px"
            >
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="check">查 询</a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="excelExport">导出Excel</a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="list"
        :pagination="pagination"
        :row-key="(record,index) => index"
        @change="tableChange"
      ></a-table>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { queryDeptDown } from '@/api'
import { queryDeptList } from '@/api/systemPersonnelManage'
import { commonExport } from '@/api/request'
import { queryDailyTrackReportList } from '@/api/orderCenter'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '操作姓名',
    dataIndex: 'handler'
  },
  {
    title: '所属部门',
    dataIndex: 'department'
  },
  {
    title: '需跟踪箱量',
    dataIndex: 'untrackedQuantity',
    sorter: (a, b) => a.untrackedQuantity - b.untrackedQuantity
  },
  {
    title: '已跟踪箱量',
    dataIndex: 'trackedQuantity',
    sorter: (a, b) => a.trackedQuantity - b.trackedQuantity
  },
  {
    title: '跟踪完成率',
    dataIndex: 'trackedCompleteRateStr',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.trackedCompleteRate - b.trackedCompleteRate
  },
  {
    title: '已完成箱量',
    dataIndex: 'completedQuantity',
    sorter: (a, b) => a.completedQuantity - b.completedQuantity
  }
]
export default {
  data () {
    return {
      defaultExpandedKeys: [],
      pageNum: 1,
      pageSize: 10,
      loading: true,
      columns,
      list: [],
      pagination: {},
      form: {
        deptId: '',
        handlerLike: '',
        startDate: '',
        endDate: '',
        orderParam: '',
        orderType: ''
      },
      deptTreeData: [],
      createValue: []
    }
  },
  methods: {
    tableChange (pagination, filters, sorter) {
      let columnKey = sorter.columnKey
      let sorterOrder = sorter.order
      if (columnKey === 'untrackedQuantity') {
        if (sorterOrder) {
          this.form.orderType = (sorterOrder === 'ascend' ? 'ASC' : 'DESC')
          this.form.orderParam = columnKey
          this.submit()
        } else {
          this.form.orderType = ''
          this.form.orderParam = ''
          this.submit2()
        }
      } else if (columnKey === 'trackedQuantity') {
        if (sorterOrder) {
          this.form.orderType = (sorterOrder === 'ascend' ? 'ASC' : 'DESC')
          this.form.orderParam = columnKey
          this.submit()
        } else {
          this.form.orderType = ''
          this.form.orderParam = ''
          this.submit2()
        }
      } else if (columnKey === 'trackedCompleteRateStr') {
        if (sorterOrder) {
          this.form.orderType = (sorterOrder === 'ascend' ? 'ASC' : 'DESC')
          this.form.orderParam = 'trackedCompleteRate'
          this.submit()
        } else {
          this.form.orderType = ''
          this.form.orderParam = ''
          this.submit2()
        }
      } else if (columnKey === 'completedQuantity') {
        if (sorterOrder) {
          this.form.orderType = (sorterOrder === 'ascend' ? 'ASC' : 'DESC')
          this.form.orderParam = columnKey
          this.submit()
        } else {
          this.form.orderType = ''
          this.form.orderParam = ''
          this.submit2()
        }
      }
    },
    onLoadData (treeNode) {
      return new Promise(resolve => {
        if (treeNode.dataRef.children && treeNode.dataRef.children.length > 0) {
          resolve()
          return
        }
        queryDeptList({parentId: treeNode.dataRef.key}).then(rsp => {
          let childrenData = []
          rsp.data.forEach((value) => {
            childrenData.push({
              title: value.name,
              key: value.deptId,
              value: value.deptId
            })
          })
          treeNode.dataRef.children = childrenData
          this.deptTreeData = [...this.deptTreeData]
          resolve()
        })
      })
    },
    getDataRequest (e) {
      this.loading = true
      queryDailyTrackReportList(e)
        .then(res => {
          // // console.log(res.data)
          this.list = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                ...this.form,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
              this.getDataRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                ...this.form,
                pageNum: this.pageNum,
                pageSize: this.pageSize
              }
              this.getDataRequest(paramData)
            }
          }
          setTimeout(() => {
            this.loading = false
          }, 500)
        })
        .catch(rs => {})
    },
    onChange (date, dateStr) {
      this.createValue = date
      this.form.startDate = dateStr[0]
      this.form.endDate = dateStr[1]
    },
    check () {
      this.pageNum = 1
      this.getDataRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    submit2 () {
      this.getDataRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    submit () {
      this.loading = true
      queryDailyTrackReportList({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
        .then(res => {
          // // console.log(res.data)
          this.list = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              // let paramData = {
              //   ...this.form,
              //   pageNum: this.pageNum,
              //   pageSize: this.pageSize
              // }
              // this.getDataRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              // let paramData = {
              //   ...this.form,
              //   pageNum: this.pageNum,
              //   pageSize: this.pageSize
              // }
              // this.getDataRequest(paramData)
            }
          }
          setTimeout(() => {
            this.loading = false
          }, 500)
        })
        .catch(rs => {})
    },
    excelExport () {
      commonExport('/order/exportDailyTrackReportList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    funGetDateStr (days) {
      var dd = new Date()
      dd.setDate(dd.getDate() + days)// 获取p_count天后的日期
      var y = dd.getFullYear()
      var m = dd.getMonth() + 1// 获取当前月份的日期
      if (m < 10) {
        m = '0' + m
      }
      var d = dd.getDate()
      if (d < 10) {
        d = '0' + d
      }
      return y + '-' + m + '-' + d
    }
  },
  mounted () {
    const yesToday = this.funGetDateStr(-1)
    this.createValue = [moment(yesToday), moment(yesToday)]
    this.form.startDate = yesToday
    this.form.endDate = yesToday
    // console.log(yesToday)
    queryDeptDown({
      type: 2, // type 1判断权限 2不判断
      dataRole: 'CONTAINER_SELL'
    }).then(rsp => {
      let initData = []
      rsp.data.forEach((value, index) => {
        initData.push({
          title: value.name,
          key: value.deptId,
          value: value.deptId
        })
      })
      this.deptTreeData = [...initData]
      this.form.deptId = this.deptTreeData[0].key
    })
    this.check()
  }
}
</script>
